<template>
    <ul class="footer">
        <li :class="{selected:tabIndex === 0}" @click="changeTab(0)">
            <i class="iconfont iconshouye"></i>
            <p>首页</p>
        </li>
        <li :class="{selected:tabIndex === 1}" @click="changeTab(1)">
            <i class="iconfont iconyingyong"></i>
            <p>应用</p>
        </li>
        <li :class="{selected:tabIndex === 2}" @click="changeTab(2)">
            <i class="iconfont iconwode"></i>
            <p>我的</p>
        </li>
    </ul>
</template>

<script>
    export default {
        data(){
            return {
                tabIndex:0
            }
        },
        methods:{
          changeTab(newVal) {
              let url;
              if(newVal == 0) url = '/';
              if(newVal == 1) url = '/application';
              if(newVal == 2) url = 'self';
              this.tabIndex = newVal;
              this.$router.push({
                  path:url
              })
          }
        }
    }
</script>

<style scoped lang="less">
    .footer{
        position: fixed;
        bottom:0;
        width: 100vw;
        height: 52px;
        background: #f2f2f2;
        border-top: 1px solid #f2f2f2;
        box-sizing: border-box;
        display: flex;
        flex-wrap: nowrap;
        li{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            i{
                color:#666;
                font-size: 20px;
            }
            p{
                color:#666;
            }
        }
        .selected{
            i{
                color:red;
            }
            p{
                color:red;
            }
        }
    }
</style>
